import { deleteBanner, getBannerList } from '@/api/banner';
import { Button, Popconfirm, Space, Table, Image, Spin, message } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { useState, type FC, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

interface BannerListProps { }
interface DataType {
    bannerid: string
    img: string
    link: string
    alt: string
}

const BannerList: FC<BannerListProps> = () => {
    const navigate = useNavigate()
    const [data, setData] = useState([])
    const height = document.body.clientHeight
    const [current, setCurrent] = useState(1)
    const [flag, setFlag] = useState(true)
    const [messageApi, contextHolder] = message.useMessage();
    useEffect(() => {
        (async function fn() {
            setFlag(true)
            let res = await getBannerList()
            setData(res.data.data);
            setFlag(false)
        })()
    }, [])
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            render: (text: any, record: DataType, index: number) => {
                return (
                    <span>{(current - 1) * 10 + (index + 1)}</span>
                )
            }
        },
        {
            title: '图片',
            dataIndex: 'img',
            render: (text: string) => {
                return (
                    <Image src={text} style={{ width: 50, height: 50 }}></Image>
                )
            }
        },
        {
            title: '提示',
            dataIndex: 'alt',
        },
        {
            title: '链接',
            dataIndex: 'link',
        },
        {
            title: '操作',
            render: (text: DataType, record: DataType, index: number) => {
                return (
                    <Space>
                        <Popconfirm
                            title="删除数据"
                            description="你确定要删除这条数据吗?"
                            onConfirm={() => {
                                deleteBanner({ bannerid: record.bannerid }).then((res) => {
                                    console.log(res.data);
                                    if(res.data.code ==='200'){
                                        messageApi.open({
                                            type: 'success',
                                            content: '添加管理员成功',
                                        });
                                    }
                                    getBannerList().then((res) => {
                                        setData(res.data.data);
                                    })
                                })
                             }}
                            okText="确定"
                            cancelText="取消"
                        >
                            <Button danger>删除</Button>
                        </Popconfirm>
                    </Space>
                )
            }
        }
    ]
    const onChange = (page: any) => {
        setCurrent(page)
    }
    return (
        <Space direction='vertical' style={{ width: '100%' }}>
            {contextHolder}
            <Button type='primary' onClick={() => {
                navigate('/banner/add')
            }}>添加轮播图</Button>
            <Spin tip="加载中,请稍等！！" size="large" style={{ width: '100%', height: '100%', display: 'flex' }} spinning={flag}>
                <Table
                    columns={columns}
                    dataSource={data}
                    scroll={{ y: height - 330, }}
                    rowKey='bannerid'
                    pagination={
                        {
                            total: data.length,
                            showTotal: (total) => `共 ${total} 条数据`,
                            showQuickJumper: true,
                            showSizeChanger: true,
                            onChange,
                            pageSizeOptions: [5, 10, 20, 50]
                        }
                    }
                />
            </Spin>

        </Space>
    );
}

export default BannerList;
